<script setup lang="ts">
import CardTitle from '../components/card-title.vue';
import VChart, { THEME_KEY } from 'vue-echarts';
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { TitleComponent } from 'echarts/components';
import { TooltipComponent } from 'echarts/components';
import { LegendComponent } from 'echarts/components';
import type { ComposeOption } from 'echarts/core'
import type { LineSeriesOption } from 'echarts/charts'
import type { GridComponentOption } from 'echarts/components'
import { ref } from 'vue';

use([TitleComponent, GridComponent, LineChart, CanvasRenderer, LegendComponent, TooltipComponent])

type EChartsOption = ComposeOption<GridComponentOption | LineSeriesOption>

const option = ref<EChartsOption>({
    grid: {
        left: '10px',
        right: '10px',
        containLabel: true // 让标签内容参与布局，避免被裁切
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['温度', '湿度'],
        // top: 30
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    yAxis: [
        {
            type: 'value',
            name: '温度 (°C)',
            position: 'left',
            min: (v) => v.min - 2, 
            axisLine: {
                lineStyle: { color: '#11ebd7' }
            },
            axisLabel: {
                formatter: '{value} °C'
            }
        },
        {
            type: 'value',
            name: '湿度 (%)',
            position: 'right',
            min: (v) => v.min - 2,
            axisLine: {
                lineStyle: { color: '#ff9f7f' }
            },
            axisLabel: {
                formatter: '{value} %'
            }
        }
    ],
    series: [
        {
            name: '温度',
            type: 'line',
            yAxisIndex: 0, // 使用左侧 Y 轴
            data: [12, 14, 16, 13, 17, 20],
            smooth: true,
            lineStyle: { color: '#11ebd7' }
        },
        {
            name: '湿度',
            type: 'line',
            yAxisIndex: 1, // 使用右侧 Y 轴
            data: [60, 62, 65, 66, 64, 63],
            smooth: true,
            lineStyle: { color: '#ff9f7f' }
        }
    ]
})
</script>

<template>
    <div class="col align-center" style="width: 100%;">
        <CardTitle text="当前温度" />
        <v-chart class="chart" :option="option" />
    </div>

</template>

<style scoped>
.chart {
    width: 309px;
    height: 309px;
}
</style>